<template>
  <div class="feedback-box">
    <div class="feedback">
      <textarea v-model="feedContent" name="" maxlength="200" placeholder="请填写您的意见..." @input="validate()" @change="validate()" @focus="validate()"></textarea>
      <p class="limit-box">
        <span>{{feedContent | textLength }}/200</span>
      </p>
    </div>
    <div class="btn-groups">
      <div class="cancel-btn" @click="cancel()">取消</div>
      <div class="submit-btn" @click="submit()">确定</div>
    </div>
  </div></template>
<style>

</style>
<script>
  import Toast from 'toon-ui/lib/components/toast'
export default {
    data() {
        return {
          feedContent: '' ,
          clickCancel:false
        }
    },
    filters: {
      textLength: function (str) {
        let length = (str + "").replace(/[\r\n]/g, "占位").length;
        return length > 200 ? 200 : length;
      }
    },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if(!this.clickCancel){
      let feedback ={
        id:this.$route.params.id,
        feedContent:''
      };
      feedback.feedContent = this.feedContent;
      this.$util.sessionData('feedbackContent',JSON.stringify(feedback));
    }
    next();
  },
  mounted() {
    this.init();
  },
  //销毁实例
  deactivated(){
    this.$destroy();
  },
    methods: {
      init:function (){
        this.$util.setTitle("问题处理");
        if (this.$util.sessionData("feedbackContent")) {
          let feedbackObj = JSON.parse(this.$util.sessionData("feedbackContent"));
          if(feedbackObj.id == this.$route.params.id){
            this.feedContent = feedbackObj.feedContent;
            sessionStorage.removeItem("feedbackContent");
          }
        }
      },
      validate: function (){
        var newContent = this.feedContent.replace(/[*]/g,'-').replace(/[\n\r]/g,'**');
        if(newContent.length>200){
          newContent = newContent.substring(0,200);
          newContent = newContent.replace(/\*\*/g,'-').replace(/\*$/,'');
          this.feedContent = this.feedContent.substring(0,newContent.length);
        }
      },
        cancel: function () {
          this.clickCancel = true;
          sessionStorage.removeItem("feedbackContent");
          // 跳到详情页
          this.$router.go(-1);
        },
        submit:function () {
          let _this = this;
          _this.feedContent = _this.feedContent.trim();
          //意见不能为空
          if( _this.feedContent == ''){
            Toast({
              message: '请填写您的意见！',
              duration: 1000, // 持续时间，默认3000毫秒
              position: 'top',
            });
            return false
          }
          var params = {
            "id": _this.$route.params.id,
            "messge": _this.feedContent,
            "userFeedBack": 1
          }
          this.$http.post("/convphoto/userFeedBack", params).then(function (res) {
            if (res.meta && res.meta.code == '0'){
              // 跳到详情页
              let feedbackStatus = {
                  id:_this.$route.params.id,
                feedbackStatus:1
              }
              _this.$util.sessionData('feedbackStatus',JSON.stringify(feedbackStatus));
              _this.$router.go(-1);
            }else{
              Toast({
                'message': res.meta.message,
                'duration': 1000, // 持续时间，默认3000毫秒
              });
            }

          }).catch(function (err) {
            Toast({
              'message': '反馈失败',
              'duration': 1000, // 持续时间，默认3000毫秒
            });
          })
        }

    }
}
</script>


<style scoped>
  /* 反馈 */
  .feedback {
    padding: 15px 15px 20px;
  ;
    height: 217px;
    background: #fff;
  }

  textarea {
    width: 100%;
    height: 160px;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 26px;
    resize: none;
  }

  .limit-box {
    text-align: right;
    font-size: 14px;
    color: #8E8E93;
  }

  .btn-groups {
    margin-top: 30px;
    overflow: hidden;
    padding: 0 15px;
  }

  .cancel-btn, .submit-btn {
    width: 165px;
    line-height: 39px;
    text-align: center;
  }
  .cancel-btn {
    float: left;
    background: #FFFFFF;
    border: 1px solid #DF3031;
    border-radius: 4px;
    font-size: 17px;
    color: #DF3031;
    margin-right: 15px;
  }

  .submit-btn {
    float: left;
    background: #DF3031;
    border-radius: 4px;
    font-size: 17px;
    color: #FFFFFF;
  }
</style>

